<template>
	<div class="middle-container">
		<div class="bread">
			<Breadcrumb>
				<BreadcrumbItem to="/" class="text">首页</BreadcrumbItem>
				<BreadcrumbItem to="/" class="text">博客</BreadcrumbItem>
				<BreadcrumbItem class="text">{{info.title}}</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="canvas-container">
			<img name="scream" src="https://i.loli.net/2021/08/02/4vKFBSTrGLM13Cu.jpg" alt="">
		</div>
		<div class="container-content">
			<div style="text-align: center;">
				<h1>{{info.title}}</h1>
				<div class="statistics">
					<Icon type="md-time" /><span>{{info.created_at}}</span>
					<!-- <Icon type="md-chatboxes" style="margin-left: 30px;"/><span>133条评论</span> -->
					<Icon type="ios-eye" style="margin-left: 30px;"/><span>18次阅读</span>
					<Icon type="ios-thumbs-up" style="margin-left: 30px;"/><span>6人点赞</span>
				</div>
			</div>
			<MarkdownContent></MarkdownContent>
		</div>
	</div>
</template>

<script>
	import MarkdownContent from './MarkdownContent'
	import { getArticleDetail } from '@/api/index'

	export default{
		name: 'BlogContent',
		data(){
			return {
				article_id: '',
				info: ''
			}
		},
		components: {
			MarkdownContent: MarkdownContent
		},
		props:["data"],
		mounted(){
			// this.article_id = localStorage.getItem('article_id');
			this.article_id = this.$route.query.id
			console.log("article_id:", this.article_id)
			this.getDetail()
		},
		methods:{
			getDetail(){
				this.article_id = this.$route.query.id
				getArticleDetail(this.article_id).then(res=>{
					this.info = res.data.data
					console.log(res)
				})
			}
		},
		
	}
</script>

<style scoped>
.middle-container{
	width: 40%;
	border-radius: 10px;
	padding: 0px 20px;
	height: 600px;
	min-width: 800px;
	max-width: 1000px; 
}

.bread{
	height: 40px;
	border-radius: 5px; 
	width: 100%;
	background-color: white;
	margin: auto;
	padding: 10px;
}

.canvas-container{
	margin-top: 15px;
	overflow: hidden;
	border-radius: 10px 10px 0px 0px;
	height: 200px;
}

.text{
	font-size: 16px;
}

.container-content{
	width: 100%;
	background-color: white;
	padding: 20px;
}

.statistics{
	margin-top: 20px;
	font-size: 16px;
}

.content{
	margin-top: 20px;
	padding: 20px;
}

</style>